<template>
    <div class='my_container'>
        <div class="backdrop"></div>
        <div class="my_content">
            <div class="my_detail">
                <div class="avatar">
                    <img :src="sendData.avatar" alt="" style="border-radius: 50%;">
                </div>
                <div class="name_detail">
                    <span class="userName">{{sendData.nick}}</span>
                    <div>
                        <span :class="{'blue':sexHandler('男'),'pink':sexHandler('女')}">{{ userDetail.sex =='0'?'男':"女" }}</span>
                        <img src="@/assets/addApp/bili_boy.png" style="width: 14px; margin-left: 3px;" v-show="sexHandler('男')"/>
                        <img src="@/assets/addApp/bili_girl.png" style="width: 14px; margin-left: 3px;" v-show="sexHandler('女')"/>
                    </div>
                    <span>签名：{{ userDetail.sign ? userDetail.sign : '无' }}</span>
                </div>
            </div>
            <div class="my_message">
                <div>
                    <img src="@/assets/addApp/bili_birthday.png" style="width: 20px;"/>
                    <span> 生日：{{ userDetail.birthday }}</span>
                </div>
                <div>
                    <img src="@/assets/addApp/bili_level.png" style="width: 20px;"/>
                    <span> 等级：{{ userDetail.level }}</span>
                </div>
                <div>
                    <img src="@/assets/addApp/bili_coins.png" style="width: 20px;"/>
                    <span> 金币：{{ userDetail.coins }}</span>
                </div>
            </div>
        </div> 
        <div class="line"></div>
    </div>
</template>

<script>
import { getUserDetailApi } from '@/api/addApp/bilibili_api'
export default {
    name: 'myMessage',
    props:['sendData'],
    data() {
        return {
            userDetail:{}
        };
    },
    components: {

    },
    created() {

    },
    mounted() {
        this.getUserDetail();
    },
    methods: {
        //判断男女
        sexHandler(flage){
            if(this.userDetail.sex == '0' && flage == '男'){
                return true
            }else if(this.userDetail.sex == '1' && flage == '女'){
                return true
            }else{
                return false
            }
        },
        async getUserDetail() {
            let data = {
                proof_num: this.sendData.proof_num,
                name: this.sendData.nick
            }
            try {
                let list = await getUserDetailApi(data);
                if(list.data){
                    this.userDetail=list.data[0];
                }
            } catch (error) {
                console.error(error);
            }
        }

    },
};
</script>

<style lang='scss' scoped>
.blue {
    color: #03a3e3;
}
.pink{
    color: #bc708b;
}
.my_container {
    position: relative;

    .backdrop {
        background: linear-gradient(to bottom, #f9e5ec, #fff);
        width: 100%;
        height: 200px;
    }

    .my_content {
        position: absolute;
        top: 50px;
        left: 7%;
        background-color: #fff;
        width: 86%;
        height: 150px;
        border-radius: 10px;
        padding: 20px;

        .my_detail {
            display: flex;

            .avatar {
                border-radius: 50%;
                width: 80px;
                height: 80px;
                overflow: hidden;

                img {
                    object-fit: cover;
                    width: 100%;
                    height: 100%;
                }
            }

            .name_detail {
                margin-left: 20px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                .userName {
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    max-width: 220px;
                    font-weight: 900;
                }
            }
        }
        .my_message{
            display: flex;
            width: 100%;
            justify-content: space-around;
            margin-top: 25px;
        }
    }

    .line {
        height: 1px;
        width: 100%;
        background-color: #f4acc5;
        margin-top: 10px;
    }
}
</style>